<template>
    <div style="padding: 0px 3px;">
        <h3 class="title">{{photoinfo.title}}</h3>
        <div class="info">
            <span>发表时间：{{photoinfo.add_time | dateFormat}}</span>
            <span>点击：{{photoinfo.click}}次</span>
        </div>
        <hr>

        <div class="thumb-img-list">
             <vue-preview :slides="photolist" class="preview"></vue-preview>
        </div>

        <div class="content" v-html="photoinfo.content"></div>

        <comment :newsid="id"></comment>
    </div>
</template>

<script>
    import comment from '../public/Comment.vue'
    export default {
        data() {
            return {
                photoinfo: {},
                photolist: []

            }
        },
        created() {
            this.getPhotoInfo();
            this.getThumbImg()
        },
        methods: {
            async getPhotoInfo() {
                const {
                    data
                } = await this.$http.get('/api/getimageInfo/' + this.id);
                if (data.status === 0) return (this.photoinfo = data.message[0]);
            },
            async getThumbImg() {
                // 获取图片的缩略图数据
                const {
                    data
                } = await this.$http.get("/api/getthumimages/" + this.id);
                if (data.status === 0) {
                    //  为 每一张图片设置 宽和高
                    data.message.forEach(item => {
                        item.src = item.src;
                        item.msrc = item.src;
                        item.w = 600;
                        item.h = 400;
                    });

                    this.photolist = data.message;
                }
            }

        },
        props: ["id"],
        components: {
            comment
        }

    }
</script>

<style scoped>
    .title {
        font-size: 15px;
        text-align: center;
        color: royalblue;
    }

    .info {
        font-size: 13px;
        display: flex;
        justify-content: space-between;

    }
</style>